<template>
	<view class="profile">
		
		<view class="head">
			<view class="upper">
				<view class="avatar">

					<image class="avatar-image" :src="avatarUrl" mode="aspectFill"></image>

				</view>
				<view class="info-lines">
					<view class="name">姓名：{{personInfo.nickName}}</view>
					<view class="level">等级：{{personInfo.userLevel}}</view>
					<view class="days">
						已守卫您的宝物{{personInfo.guardDays}}天
					</view>
				</view>
			</view>
			<view class="down">
				<view class="box">
					<view v-if="userPhone">
						<text class="num telephone">{{userPhone}}</text>
						<view class="txt">手机号</view>
					</view>
					<view class="login" v-else @tap="login">
						登录
					</view>
					
				</view>
				
				<view class="box">
					<navigator url="/pages/order/index">
						<text class="num">{{ orderNum }}</text>
						<view class="txt">订单</view>
					</navigator>	
				</view>
				
				<view class="box">
					<text class="num">1</text>
					<view class="txt">地址簿</view>
				</view>
				
				<view class="box">
					<text class="num">0</text>
					<navigator url="/pages/profile/cards">
					  <view class="txt">卡包</view>
					</navigator>
				</view>
			</view>
		</view>
		
		
		<view class="remain-body">
			<view class="digtal-boxs">
				<view class="box" @tap="goTo('/pages/profile/personalCode')">				
					 个人码					
				</view>

				<view class="box">
					<navigator url="/pages/profile/privateData">
					私人数据
					</navigator>
				</view>

				<view class="box" @tap="goTo('/pages/profile/setting')">			
				  设置
				</view>
			</view>

			<view class="digtal-boxs2">
				<!-- 1,3 状态才能查历史记录 -->
				<view class="box" v-if="[1,3].includes(personInfo.codeState)">
					<navigator url="/pages/profile/personalCodeHistory">
					 个人码申请记录
					</navigator>
				</view>
                
				<!-- 2 状态才能查历史记录 -->
				<view class="box"  v-if="[2].includes(personInfo.codeState)">
					<navigator url="/pages/profile/personalCodeInterestRecord">
					 分佣记录
					</navigator>
				</view>

				
			</view>
			
			<view class="divider"></view>
			
			<view class="ads">
				<!-- <ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror">
					
				</ad> -->
			</view>
		</view>
		
		<Custom-tab-bar :current="3" />
		
	</view>
</template>

<script>
	import * as api from '../../utils/api.js'
	import CustomTabBar from '../../components/custom-tab-bar.vue';
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		components: { CustomTabBar },
		data() {
			return {
				imgPrex,
				orderNum: 0,
				userPhone: null,
				token: null,
				personInfo: {
					avatar: '',
					userName: '净坛使者',
					userLevel: 1,
					guardDays: 1,
					codeState: 0, // 0未申请 1 待审核 2 通过 3 拒绝
				}
			}
		},
		computed: {
			// 兼容微信头像
			avatarUrl () {
				if (!this.personInfo.avatar) return '/static/default-avatar.jpg';
				if (this.personInfo.avatar && this.personInfo.avatar.indexOf('http') > -1) return this.personInfo.avatar;
				return this.imgPrex + this.personInfo.avatar;
			}
		},
		// 改成每次切换都重新获取
		onShow() {
			this.getOrderNum();
			this.getUserInfo();
			uni.hideTabBar({
			    animation: false
			  })
			this.userPhone = uni.getStorageSync('userPhone');
			this.token = uni.getStorageSync('token');
		},
		methods: {
		
			login () {			  
			  	uni.redirectTo({
			  		url: '/pages/login/index'
			  	});
			  	
			},
			goTo (url) {
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.redirectTo({
						url: '/pages/login/index'
					});
					return;
				}
				// 需要先根据codeState判断是否有个人码 1 代表正在审核zhong 2 代表通过 3 代表拒绝
				if (this.personInfo.codeState ===1 ) {
					uni.showToast({
						title: '您的个人码正在审核中, 可以在个人码申请记录中查看进度',
						icon: 'none'	
					});
					return;
				}
				uni.navigateTo({ url });
			},
			async getUserInfo () {
			    const res = await api.getUserInfo();
				this.personInfo = Object.assign(this.personInfo, res.appUser);

			},
              async getOrderNum() {
				  const { data } = await api.personalOrderCount();
				  this.orderNum = data || 0;
			  },
              onclose(e) {
                console.log("onclose: " + e.detail);
              },
              onerror(e) {
                console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
              }
		}
	}
</script>

<style lang="scss">
	.profile {
		padding: 40rpx 20rpx;
		color: white;
		.head{
			padding: 40rpx 26rpx;
			border-radius: 12rpx;
			background-color: #2f2f2f;
			
			.upper{
				display: flex;
				gap: 40rpx;
				align-items: center;
				margin-bottom: 30rpx;
				.avatar {
					.avatar-image {
						width: 140rpx;
						height: 140rpx;
					}
				}
			    
			}
				
		    .down {
				display: flex;
				.box {
				  flex: 1;
				  text-align: center;
				  font-size: 40rpx;
				}
				.telephone {
					font-size: 28rpx;
				}
				.login {
					background: #eab229;
					font-size: 40rpx;				
				}
			}
			
		}
		
		.remain-body {
			margin-top: 40rpx;
			text-align: center;
			padding: 40rpx 26rpx;
			border-radius: 12rpx;
			background: #2f2f2f;
			
			.digtal-boxs {	
				display: flex;
				justify-content: center;
				gap: 20rpx;
				margin-bottom: 40rpx;
				flex-grow: 0;	
				.box {
					flex: 1;
					font-size: 40rpx;
					padding: 30rpx 20rpx;
					border-radius: 12rpx;
					background-color: rgba(0, 0, 0, 0.7);
				}	
			}
			.digtal-boxs2 {	
				display: flex;
				justify-content: start;
				gap: 20rpx;
				margin-bottom: 40rpx;
				.box {
					font-size: 40rpx;
					padding: 30rpx 20rpx;
					border-radius: 12rpx;
					background-color: rgba(0, 0, 0, 0.7);
				}	
			}
			
			.divider {
				width: 100%;
				height: 4rpx;
				margin: 10rpx 0;
				background-color: rgba(0, 0, 0, 0.9);;
			}
		   .ads {
			   text-align: center;
			   min-height: 500rpx;
		   }
					
		}
		
	}
</style>
